
<template>
	<div class="products_drive">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="接口名称" prop="name" style='width:30%;' >
		    <el-input v-model="ruleForm.name" placeholder='请输入接口名称' ></el-input>
		  </el-form-item>
		  <el-form-item label="接口版本" prop="version" style='width:30%;' >
		    <el-input v-model="ruleForm.version" placeholder='请输入接口版本' ></el-input>
		  </el-form-item>
		  <el-form-item label="接口地址" prop="address" style='width:30%;'>
		    <el-input v-model="ruleForm.address" placeholder='请输入接口地址'></el-input>
		  </el-form-item>
		  <el-form-item label="接口描述" prop="desc" style='width:30%;'>
		    <el-input type="textarea" v-model="ruleForm.desc" placeholder='请输入接口描述'></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
		    <el-button @click="resetForm('ruleForm')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
import { interfaceAdd, checkLogin } from '../../api/api.js';
export default {
	name:'InterfaceAdd',
	data() {
		var Edition = (rule, value, callback) => {
			console.log(value);
			var re =/^[1-9]+\.\d+\.\d+$/im;
			if (re.test(value)){
				callback();
			}else{
				return callback(new Error('版本号不正确'));
			}
		};
		return {
ruleForm: {
          name: '',
          address: '',
          desc: '',
          version:''
        },
        rules: {
          name: [
            { required: true, message: '请输入接口名称', trigger: 'blur' },
          ],
          version: [
            { required: true, message: '请输入接口版本', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入接口地址', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写接口描述', trigger: 'blur' }
          ]
        }
		};
	},
	methods:{
		//提交接口创建
		submitForm(ruleForm) {
	        this.$refs[ruleForm].validate((valid) => {
	          if (valid) {
	          	console.log('formName.name......',this.ruleForm.name);
	          	console.log('formName.version......',this.ruleForm.version);
	          	console.log('formName.address......',this.ruleForm.address);
	          	console.log('formName.desc......',this.ruleForm.desc);
				this.getUsers();
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	    resetForm(formName) {
	        this.$refs[formName].resetFields();
	      },
	//接口添加
		getUsers() {
			let para = {
				name: this.ruleForm.name,
				version: this.ruleForm.version,
				address: this.ruleForm.address,
				desc: this.ruleForm.desc,
			};
			this.listLoading = false;
			interfaceAdd(para).then((res) => {
				if(res.code === '0000'){
					this.open();	
				}else if(res.code == '3001'){
					let type = 'error';
					let msg ='接口名称已存在！';
					this.open2(msg,type);
				}else if(res.code == '3002'){
					let type = 'error';
					let msg ='接口地址已存在！';
					this.open2(msg,type);
				}
				console.log('res.message.....',res.message);
	         	
			});
		},
//		操作成功提示
		open(){
			 this.$message({
	          message:'添加成功!',
	          type: 'success'
	        });
	       	this.$router.push('/interfaces/interfaceAdmin');
		},
//		操作失败提示
		open2(msg,type) {
	        this.$message({
	          message:msg,
	          type: type
	        });
      	}
	},
	mounted(){
		checkLogin(this);
	}
}
</script>
<style scoped>
	.products_drive{width:100%;margin:10px;margin-left:200px;}
	.products_drive .di{
		width:90%;
		margin: 0 auto;
		overflow: hidden;

	}
	.products_drive .di .di_foot{
		float: right;
		width: 38%;
		padding-bottom: 20px;
		padding-top: 20px;
	}
</style>
